{% extends 'index.html' %}

{% block page-title %}

{% endblock %}

{% block page-content %}
<link href="/static/css/bootstrap-switch.min.css" rel="stylesheet">
<style>
.mask {
        position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
        z-index: 1002; left: 0px;
        opacity:0.5; -moz-opacity:0.5;
}
#table-1 thead, #table-1 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
#table-1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}

/* Padding and font style */
#table-1 td, #table-1 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}

/* Alternating background colors */
#table-1 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
#table-1 tr:nth-child(odd) {
background: #FFF
}
.sea {
    z-index: 3;
}

</style>

<div class="row">
    <div class="cls-content">
            <div class="cls-content-sm panel">
                    <div class="panel-body">
                        <p class="pad-btm">MySQL管理</p>
                        <form id="form1" action="#" method="post">

                            <div class="form-group">
                                    <div class="input-group sea">
                                        <div class="input-group-addon">IP</div>
                                        <select id="IP" name="IP" class="selectpicker form-control"  data-live-search="true" onchange="select_port(this)">
                                            <option value="" selected="true" disabled="true">请选择主机</option>
                                            {% for host in host_list %}
                                            <option value="{{ host.ip_addr }}">{{ host.ip_addr }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="input-group">
                                        <div class="input-group-addon">端口</div>
                                        <select id="PORT" name="PORT" class="form-control" onchange="change_port(this)">

                                        </select>
                                    </div>
                            </div>

                        </form>
                        <button id="btn" class="btn btn-success  btn-block" onclick="confirmAct()">
                            <b>查询</b>
                        </button>

                    </div> <!--end col-lg-9-->

            </div>
    </div>
</div>
<span id='text_ip' style="display:none"></span>
{% include 'mysql_user_modal.html' %}
<div>
    <table class="table" id="table-1">
        <tr>
            <th>用户名</th>
            <th>授权主机</th>
            <th>操作</th>
        </tr>
        <tr id="dynamicCreate" style="display: none">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
<div id="mysql_add"></div>
<div id="mask" class="mask"></div>
<script src="/static/js/jquery-2.1.1.min.js"></script>


<!--<script src="/static/plugins/bootstrap-select/bootstrap-select.min.js"></script>-->

<!--<script src="/static/js/bootstrap.min.js"></script>-->
<!--<script src="/static/js/bootstrap-switch.min.js"></script>-->


{% include 'mysql_user_js.html' %}
{% endblock %}
